<template>
    <div>
        <div id="content" style="line-height:0">
            <div style="line-height:0">
                <i class="el-icon-menu"></i>
                <span style="line-height:0">筛选</span>
            </div>
            <div id="search">
                <label>输入搜索</label>
                <el-input
                    id="input"
                    placeholder="请输入基金代码等查询"
                    v-model="inputvalue"
                ></el-input>
                <el-button @click="search(inputvalue)" style="margin-left: 10px; width: 90px" type="primary"
                    ><i class="el-icon-search"></i>筛选</el-button
                >
                <el-button style="margin-left: 10px"  @click="clear">清空筛选条件</el-button>
                <router-link to="/Home/addible"
                    ><el-button style="margin-left: 10px"
                       
                        >查看所有可添加活期</el-button
                    ></router-link
                >
            </div>
            <div
                style="
                    width: 150px;
                    height: 36px;
                    background-color: #d3dce6;
                    margin-top: 15px;
                    border-radius: 5px;
                    margin-bottom: 15px;
                "
            >
                <i class="el-icon-menu"></i>
                <span>活期基金列表</span>
            </div>
            <el-table
                @selection-change="handleSelectionChange"
                :data="tableData"
                border
                stripe
                style="width: 100%"
            >
                <el-table-column type="selection" width="55px">
                </el-table-column>
                <el-table-column prop="code" label="基金代码">
                </el-table-column>
                <el-table-column prop="name" label="基金名称" width="180px">
                </el-table-column>
                <el-table-column prop="type" label="基金类型">
                </el-table-column>
                <el-table-column prop="lastMonthGrowth" label="周单位净值涨幅">
                </el-table-column>
                <el-table-column prop="buyMin" label="起购额度">
                </el-table-column>
                <el-table-column prop="buyRate" label="当前买入费率">
                </el-table-column>
                <el-table-column prop="manager" label="基金经理">
                </el-table-column>
                <el-table-column prop="fundScale" label="基金规模(更新日期)">
                </el-table-column>
                <el-table-column
                    prop="sevenDaysYearIncome"
                    label="当前七日年化收益"
                >
                </el-table-column>
                <el-table-column prop="status" label="禁用账户" width="180px">
                    <template slot-scope="scope">
                        <el-switch
                            style="display: block"
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="上架"
                            inactive-text="下架"
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="operation" label="操作">
                    <template slot-scope="scope">
                        <el-button
                            @click="handleDelete(scope.$index, scope.row)"
                            type="danger"
                            icon="el-icon-delete"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :page-size="10"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            value2: true,
            currentPage: 1,
            total: 0,
            inputvalue:""
        };
    },
    methods: {
        //搜索
        search(val){
            this.getAllCurrentFund({ name:val });
        },
        //清空筛选条件
        clear(){
            this.inputvalue = "";
            this.getAllCurrentFund({ name:"" });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        async handleDelete(index, row) {
            console.log(index, row);
            const res = await this.api.dueondemand.deleteCurrentFund({
                code:row.code,status:row.status
            });
            if(res.code){
                alert("删除成功");
                this.getAllCurrentFund();
                console.log(1)
            }
        },
        async getAllCurrentFund() {
            const res = await this.api.dueondemand.getAllCurrentFund({
                page: this.currentPage,
                name: this.inputvalue,
            });
            console.log(res);
            if (res.code) {
                this.tableData = res.data.list;
                this.total = res.data.total;
            }
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getAllCurrentFund();
        },
    },
    created() {
        this.getAllCurrentFund();
    },
};
</script>

<style lang="scss" scoped>
#content {
    width: 80%;
    margin: 0 auto;
    background-color: white;
    text-align: left;
    #search {
        margin-top: 10px;
        height: 40px;
        label {
            font-size: 14px;
            color: #606266;
            font-weight: 700;
        }
        .el-input {
            width: 185px;
            height: 100%;
            margin-left: 10px;
        }
    }
}
</style>